<!DOCTYPE html>
<html lang="en" ><!--xmlns:th="http://www.w3.org/1999/xhtml"-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>回答审核</title>
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../static/css/element.css"/>
  <script src="../../static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../static/js/vue.js"></script>
  <script src="../../static/js/element.js"></script>
  <script src="../../static/js/axios.js"></script>
  <script src="../../static/js/requestjs.js"></script>
  <script src="../../static/lib/layui/layui.js"></script>

  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>

</head>
<body>
  <div id="app">
    <!--查看文章详情-->
    <el-dialog title="文章详情" :visible.sync="dialog" width="50%" >
      <el-form label-width="80px" :model="details">
        <el-form-item label="作者">
          <el-input v-model="details.auserId"></el-input>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-input v-model="details.acreateDate"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" :rows="5" v-model="details.acontent">
        </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button v-if="details.astate === 0" type="primary" @click="checkFunc(details)"> pass </el-button>
      <el-button v-if="details.astate === 0" type="primary" @click="checkFunc(details)">no pass </el-button>
      <el-button v-else type="primary" @click="dialog = false">确 定</el-button>
    </span>
  </el-dialog>


    <!--审核操作-->
    <el-dialog title="审核文章" :visible.sync="check" width="30%">
      <el-form>
        <el-form-item label="审核描述">
          <el-input v-model="checkDetail"></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="check = false,checkDetail = '' ">取 消</el-button>
        <el-button type="success" @click="checkCommit(1)">pass</el-button>
        <el-button type="danger" @click="checkCommit(-2)">no pass</el-button>
      </span>
    </el-dialog>

    <el-dialog title="下架文章" :visible.sync="delMark" width="30%" >
      <span>您确定下架此篇文章?</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="delMark = false">取 消</el-button>
        <el-button type="primary" @click="delzx()">确 定</el-button>
      </span>
    </el-dialog>

      <table class="layui-hide" id="demo" lay-filter="test"></table>

  </div>

<div id="openProductBox" style="display: none; padding: 10px;">

</div>


  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    {{#  if(d.astate == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } else if(d.astate == 1){ }}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >下架</button>
    {{#  } }}
  </script>

  <script type="text/html" id="buttonTpl">
    {{#  if(d.astate == 1){ }}
    <button class="layui-btn layui-btn-xs">已审核</button>
    {{#  }else if(d.astate == -1){ }}
    <button class="layui-btn-warm layui-btn-xs">已下架</button>
    {{#  }else if(d.astate == -2){ }}
    <button class="layui-btn-danger layui-btn-xs">未通过</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
    {{#  } }}
  </script>

 <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>





<script type="text/javascript">
  
  var app = new Vue({
    el:"#app",
    data:{
      dialog:false,
      check:false,
      delMark:false,
      checkDetail:'',
      details:{}
    },
    methods:{
      openDetail(data) {
        this.dialog = true;
        this.details = data;
      },
      checkFunc(data){
        this.details = data;
        this.check = true;
      },
      checkCommit(state){
        this.details.aCheakDescribe = this.checkDetail;
        this.details.aState = state;
        var checkTime = '';
        var myDate = new Date();
        checkTime = myDate.getFullYear() +'-'+(((myDate.getMonth()+1)<=9)? '0'+(myDate.getMonth()+1):(myDate.getMonth()+1))+'' +
                    '-'+(myDate.getDate()<=9 ? '0'+(myDate.getDate()+1) :(myDate.getDate()+1) )+' '
                    +(myDate.getHours()<=9? '0'+ myDate.getHours():myDate.getHours())
                    +':'+(myDate.getMinutes()<=9? '0'+myDate.getMinutes() :myDate.getMinutes())
                    +':'+(myDate.getSeconds()<=9?'0'+myDate.getSeconds():myDate.getSeconds())+'.0';
        this.details.aChechTime = checkTime;

        methodaxios.post('http://192.168.0.76:7002/zx-app/upd',this.details,res=>{
          this.check = false;
          this.dialog = false;
          layui.table.reload("demo");
          this.checkDetail = '';
          this.details={}
        })
      },

      delFunc(data){
        this.details = data;
        this.delMark = true;
      },
      delzx(){
        console.log(this.details);
        this.details.aState = -1
        methodaxios.post('http://192.168.0.76:7002/zx-app/upd',this.details,res=>{
          this.check = false;
          this.dialog = false;
          this.delMark = false;
          layui.table.reload("demo");
        })
      }
    }

  })


layui.config({
  version: '1594038785991' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  
  //向世界问个好
  //layer.msg('Hello World');
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  //执行一个 table 实例
  table.render({
    elem: '#demo'
    ,height: 420
    ,url: 'http://192.168.0.76:7002/zx-app/list' //数据接口
    ,title: '回答审核'
    ,page: true //开启分页
    //,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left',width:50}
      ,{field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
      ,{field: 'auserId', title: '作者', width:100}
	  ,{field: 'atitle', title: '类型', width:80}
	  ,{field: 'acontent', title: '内容', width:200}
      ,{field: 'acreateDate', title: '创建时间', width:180}
      ,{field: 'achechTime', title: '审核时间', width: 180}
	  ,{field: 'astate', title: '状态', width: 80,templet:'#buttonTpl',align: 'center'}
	  ,{field: 'acheakDescribe', title: '审核描述', width: 200}
      ,{fixed: 'right', width: 114, align:'center', toolbar: '#barDemo'}
    ]]
  });
  
  //监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case 'add':
        layer.msg('添加');
      break;
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
        }
      break;
      case 'delete':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else {
          layer.msg('删除');
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent == 'detail'){
      console.log("查询详情")
      window.dialog = true;
      app.openDetail(data);
    } else if(layEvent == 'check'){
      app.checkFunc(data);
      console.log('审核操作');
    } else if(layEvent == 'del'){
      app.delFunc(data);
      console.log('下架操作');
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height: 200
    ,arrow: 'none' //不显示箭头
    ,anim: 'fade' //切换动画方式
  });
  
  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: '#laydateDemo'
    ,position: 'static'
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      '0-10-14': '生日'
      ,'2020-01-18': '小年'
      ,'2020-01-24': '除夕'
      ,'2020-01-25': '春节'
      ,'2020-02-01': '上班'
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint('一不小心就月底了呢');
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  //分页
  laypage.render({
    elem: 'pageDemo' //分页容器的id
    ,count: 100 //总页数
    ,skin: '#1E9FFF' //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg('第'+ obj.curr +'页', {offset: 'b'});
      }
    }
  });
  
  //上传
  upload.render({
    elem: '#uploadDemo'
    ,url: 'https://httpbin.org/post' //改成您自己的上传接口
    ,done: function(res){
      layer.msg('上传成功');
      layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
      console.log(res)
    }
  });
  
  //滑块
  var sliderInst = slider.render({
    elem: '#sliderDemo'
    ,input: true //输入框
  });
  
  /* //底部信息
  var footerTpl = lay('#footer')[0].innerHTML;
  lay('#footer').html(layui.laytpl(footerTpl).render({}))
  .removeClass('layui-hide'); */
});
</script>

</body>
</html>        
        